<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>贾静文</title>
<style type="text/css">
body{
      background-image:url(images/11.jpg);
      background-position:center;
      background-repeat:repeat-x;
      background-size: 100% 100%;
      background-attachment: fixed; /* 背景图片固定 */
      min-height: 100vh;
}
.one{
    width:600px;
    height: 50px;
    float: center;
    border: red;
    border-style:solid;
    background:rgb(255, 255, 255);
    font-size:20px;
}
.two{
    width:600px;
    height: 50px;
    float: left;
    border: yellow;
    border-top-style:dotted;
    border-bottom-style:dotted;
    border-left-style:double;
    border-right-style:double;
    background:rgb(255, 255, 255);
    font-size:20px;
}
.three{
    width:600px;
    height: 50px;
    float:right;
    border: green;
    border-style:dashed;
    background:rgb(255, 255, 255);
    font-size:20px;
}
.four{
    padding: 5%;
    margin: 3%;
    width:200px;
    height: 80px;
    background-color: #ccc;
    border: 8px solid #F00;
}
</style>
</head>
<body>

<div class="one">第一个div</div>
<div class="two">第二个div</div>
<div class="three">第三个div</div>
<div class="four">红绿灯</div>
</body>
</html>
